/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  View
} from 'react-native';


import ScrollableTabView, {
	DefaultTabBar,
	ScrollableTabBar
} from 'react-native-scrollable-tab-view';

import MePlusTabBar from './MePlusTabBar';
import Plus from './plus';
export default class test extends Component {
	constructor(props) {
		super(props);  
		 
	}
  render() { 
		var headImg         = require('./images/me.jpg');
		var tabImg   		    = [require('./images/plus2.jpg'), headImg, require('./images/friends2.jpg')]; 
		var tabImgActive   	= [require('./images/plus1.jpg'), headImg, require('./images/friends.png')]; 
		var size = 30;
    return (  
        <ScrollableTabView 
          renderTabBar={() => <MePlusTabBar 
        											headIndex={1}
        											headSize={80} 
                              tabImg={tabImg}
                              tabImgActive={tabImgActive}/>} 
          tabBarPosition='bottom'
					tabBarBackgroundColor = '#2F3435'
					tabBarInactiveTextColor ='#909090' 
					tabBarActiveTextColor ='#E18920'
					tabBarTextStyle ={{fontSize:20}}
					>  
	     	     <ScrollView tabLabel="ios-paper" style={styles.tabView}>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>

              </ScrollView> 
              <ScrollView tabLabel="ios-paper2" style={styles.tabView}>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>

              </ScrollView> 
              <ScrollView tabLabel="ios-paper3" style={styles.tabView}>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>
                <View style={styles.card}>
                  <Text>News</Text>
                </View>

              </ScrollView> 
		</ScrollableTabView>  
    );
  }
}

const styles = StyleSheet.create({
  rootView: {
    flex: 1,  
  }, 
  container: {
    flex: 1,  
    backgroundColor: "blue",
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  image: {
  	height: 30,
  	width: 30,

  },
  tabView: { 
    padding: 10,
    backgroundColor: 'rgba(0,0,0,0.01)',
  },
  card: {
    borderWidth: 1,
    backgroundColor: '#fff',
    borderColor: 'rgba(0,0,0,0.1)',
    margin: 5,
    height: 150,
    padding: 15,
    shadowColor: '#ccc',
    shadowOffset: { width: 2, height: 2, },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
});

 
